import React from "react";

const { Provider, Consumer } = React.createContext({ a: 1, b: 2 });

const Three = (props: any) => {
  return (
    <fieldset>
      <legend>Three</legend>
      {props.num}

      <Consumer>{(store) => <h2>{store.a}</h2>}</Consumer>
    </fieldset>
  );
};

const Two = (props: any) => {
  return (
    <fieldset>
      <legend>Two</legend>
      <Three num={props.num} />
    </fieldset>
  );
};

const Index = () => {
  const num = 666;
  return (
    <Provider value={{ a: 11, b: 222 }}>
      <fieldset>
        <legend>17-Context</legend>

        <Two num={num} />
      </fieldset>
    </Provider>
  );
};

export default Index;
